<template>
  <div>
    <div class="topSearch">
      <el-button size="small" type="primary" style="margin-bottom: 10px" @click="_add">新 增</el-button>
    </div>
    <div class="centerTable">
      <el-table :data="modelData" border
                height="calc(100vh - 230px)"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
        <el-table-column label="序号" type="index" width="60px"></el-table-column>
        <el-table-column label="车型" prop="vehicleModelName"></el-table-column>
        <el-table-column label="车型对应卸货提成金额" prop="unloadCommission"></el-table-column>
        <el-table-column label="车型对应装货提成金额" prop="pickCommission"></el-table-column>
        <el-table-column label='操作'>
          <template v-slot:default="scope">
            <el-link type="primary" @click="_edit(scope.row)" style="margin-right: 15px">编 辑</el-link>
            <el-link type="warning" @click="_delete(scope.row)">删 除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="addDialog" :title="title" center width="35%">
      <div id="box">
        <p><span>车型：</span>
          <el-input size="small" v-model="data.vehicleModelName" style="width: 250px;"></el-input>
        </p>
        <p><span>车型对应卸货提成金额：</span>
          <el-input size="small" v-model="data.unloadCommission" style="width: 250px;"></el-input>
        </p>
        <p><span>车型对应装货提成金额：</span>
          <el-input size="small" v-model="data.pickCommission" style="width: 250px;"></el-input>
        </p>
      </div>
      <span slot="footer">
        <el-button size="small" type="info" @click="addDialog=false">取 消</el-button>
        <el-button size="small" type="primary" @click="_submit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "carModel",
  data() {
    return {
      modelData: [],
      data: {
        pickCommission: "",
        unloadCommission: "",
        vehicleModelName: "",
      },
      addDialog: false,
      title: "",
      params: {
        pageNumber: 1,
        pageSize: 20
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.$api.vehicleGetVehicleModel(this.params).then(res => {
        this.modelData = res
      })
    },
    _add() {
      this.addDialog = true
      this.title = '新增'
      this.data = this.$options.data.call(this).data
    },
    async _submit() {
      const data1 = this.data
      try {
        const apiMap = {
          '新增': this.$api.vehicleAddVehicleModel,
          '编辑': this.$api.vehicleUpdateVehicleModel
        };
        const apiFunc = apiMap[this.title];
        console.log(apiFunc)
        if (!apiFunc) return;
        const resDate = await apiFunc(data1);
        this.$message.success(`${this.title}成功！`);
        this.addDialog = false;
        this.getData()
      } catch (err) {
        console.error('接口请求出错：', err);
        this.$message.error('操作失败，请稍后重试');
      }
    },
    _delete(row) {
      const data = {
        id: row.id,
      }
      this.$confirm(`确认删除${row.vehicleModelName}吗？`)
          .then((_) => {
            this.$api.vehicleDeleteVehicleModel(data).then()
            this.$message.success('删除成功！')
            this.getData()
          })
          .catch((_) => {
            return
          })
    },
    _edit(row) {
      this.addDialog = true
      this.title = '编辑'
      this.data = JSON.parse(JSON.stringify(row))
      this.data.id = row.id
    }
  }
}
</script>

<style scoped lang="less">
#box {
  display: flex;
  flex-direction: column;
  align-items: center;

  p {
    margin-bottom: 15px;

    span {
      display: block;
    }
  }
}
</style>